<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="field"
      width="800px"
      @close="handleClose"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="form-business"
      >
        <el-form-item label="登录名称">
          <el-input v-model="ruleForm.loginName" :disabled="true" />
        </el-form-item>
        <el-form-item label="输入密码" prop="password">
          <el-input v-model="ruleForm.password" :type="passwordType" clearable style="width: 90%;" />
           <button
                    id="togglePassword"
                    type="button"
                    class="toggle-password"
                    
                    @click="togglePasswordVisibility"
                  >
    
                    <svg-icon v-if="!showPassword" icon-class="loginNoSee" style="fill:#606266;font-size: 20px;" />
                    <svg-icon v-else icon-class="loginSee" style="fill:#606266;font-size: 20px;" />
                   
                  </button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { deptResetPwd } from "@/api/businessmanagement";
export default {
  name: "DialogForm",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    field: {
      type: String,
      default: () => "",
    },
    rowData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      ruleForm: this.rowData,
      selectedLocation: null,
      showPassword:false,
      rules: {
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  watch: {
    value(val) {
      if (val) {
        this.ruleForm = {
          loginName: this.rowData.loginName,
          userId: this.rowData.userId,
          password: "",
        };
        this.showPassword = false
      }
    },
  },
  computed: {
    passwordType() {
      return this.showPassword ? "text" : "password";
    },
    dialogVisible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {
    handleClose() {
      this.$emit("input", false);
    },
    handleConfirm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let data = {
            userId: this.ruleForm.userId,
            password: this.ruleForm.password,
            loginName: this.ruleForm.loginName,
          };
          deptResetPwd(data).then((res) => {
            if (res.code == 0) {
              this.$message.success("重置成功");
            }
          });
          this.dialogVisible = false;
        }
      });
    },
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },
  },
};
</script>

<style lang="scss" scoped>
.form-business {
  width: 600px;
  margin: 0 auto;
}

.toggle-password {
  cursor: pointer;
  transition: color 0.2s ease;
  background: none;
  border: none;
}
</style>

<style lang="scss">
.mapDialog {
  margin-top: 5vh !important;
  .el-dialog__body {
    height: 700px;
    overflow: auto;
  }
}
</style>
